<template>
    <nav>
        <div class="nav-flex">
            <van-icon @click="revTo" name="arrow-left" />
            <van-field center class="searchInput" v-model="text" placeholder="Ins风配饰"/>
            <van-button class="searchBtn" round >搜索</van-button>
        </div>
        <van-tabs v-model:active="curSelect"  background="#eae9e5" shrink>
            <van-tab title="商品" title-style="margin-left:2rem;">
            </van-tab>
            <van-tab title="店铺" title-style="margin-left:5rem;">
            </van-tab>
        </van-tabs>
    </nav>
    <div class="tabFlex" v-if="curSelect==0">
        <div>综合<van-icon name="play" /></div>
        <div>销售<van-icon name="play" /></div>
        <div>价格<van-icon name="play" /></div>
        <div class="special">|</div>
        <div>
            <span @click="dialogShow=!dialogShow">筛选</span>
        </div>
    </div>
    <div class="tabFlex" v-if="curSelect==1">   
        <div>综合排序</div>
        <div>销量优先</div>
        <div>信用</div>
        <div>|</div>
        <div>筛选</div>
    </div>
    <section>
        <template v-if="curSelect==0">
            <div class="goodBox" v-for="(item,index) in imgSrc" :key="item['src']" @click="aA(index)">
                <img :src="item['src']" alt="">
                <div class="text-box">
                    <span>{{item['name']}}</span><br/>
                    <p><span class="coupon typeOne">{{item['jiag']}}</span><span class="coupon typeTwo">{{item.juan}}</span></p>
                    <p><span><strong class="priceText">￥{{item['jg']}}</strong></span></p>
                </div>
            </div>
        </template>
        <template v-if="curSelect==1">
            <div class="shopBox" v-for="item in [1,2,3,4]" :key="item">
                <div class="shopBox-flex">
                    <div class="text-box">
                        <h5>OMINI官方旗舰店</h5>
                        <p><span>信用值100</span></p>
                    </div>
                    <van-button class="shopBtn" round size="small">进店</van-button>
                </div>
                <div class="shopBox-imgBox">
                    <img :src="item2['src']" alt="" v-for="(item2,index2) in imgSrc" :key="item2['src']" v-show="index2<3">
                </div>
            </div>
        </template>
        <h3>没有更多了哦~</h3>
    </section>
    <div class="myDialog" v-show="dialogShow">
        <div class="myDialog-left" @click="dialogShow=!dialogShow">
        </div>
        <div class="dialogCont">
            <h3>筛选</h3>
            <p>价格区间</p>
            <div class="slidBox">
                <van-slider
                v-model="sectValue" 
                range 
                @change="onChange" 
                bar-height="5px"
                button-size="1rem"
                active-color="#c1ab96"
                min="0"
                max="1000">
                    <template #left-button>
                        <div class="custom-button">
                            <div class="tipsTool">{{ sectValue[0] }}
                                <div class="radiusBox">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template #right-button>
                        <div class="custom-button">
                            <div class="tipsTool">{{ sectValue[1] }}
                                <div class="radiusBox">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </template>
                </van-slider>
            </div>
            <p>品牌</p>
            <p>折扣和服务</p>
        </div>
    </div>
</template>
<script setup lang="ts">
    import {getShopList,getCateDate} from "@/servers/homeServer"
    import { onMounted, ref, watch } from "vue"
    import {useRoute,useRouter} from 'vue-router'
    const router = useRouter();
    let route = useRoute();
    let aA = (val:any)=>{
        router.push({path:'/shoppingDetail',query:{data:JSON.stringify(imgSrc.value[val])}})
        // console.log(imgSrc.value,1111);
        
    }
    let imgSrc = ref([])
    let getDate = ()=>{
        if(route.query.toPath){
            getCateDate(<string>route.query.toPath)
            .then((res:any)=>{
                imgSrc.value= res.data[<string>route.query.cateName]
                console.log(imgSrc.value);
            })
        }else{
            getShopList()
            .then((res:any)=>{
                imgSrc.value= res.data
                console.log(imgSrc.value);
            })
        }
    }

    onMounted(()=>{
        getDate()
    })
    watch(route,()=>{
        getDate()
    })

    let curSelect = ref(0)
    let text = ref('')

    //筛选弹窗
    let dialogShow = ref(false)

    //价格双滑块
    let sectValue:any = ref([100,700])
    let onChange = (val:number[])=>{
        console.log(val);
        
    }

    let revTo = ()=>{
        window.history.go(-1);
    }
</script>
<style lang="scss" scoped>
    nav{
        // padding: 0.5rem;
        // padding: 1vw 2vw;
        background: #eae9e5;
        width: 100%;
        .nav-flex{
            width: 100%;
            width: calc(100% - 1rem);
            display: flex;
           
            justify-content: space-around;
        }
        .van-icon{
            line-height: 2rem;
            color: #c1ab96;
        }
        .searchInput{
            margin-left: 5px;
            background: #ffffff;
            border-radius: 50px;
            -webkit-text-fill-color: #c1ab96;
            // height: 2rem;
            width: 70%;
        }
        .searchBtn{
            margin-left: 10px;
            background: #c1ab96;
            // padding: 0 1rem;
            border: 1px solid #c1ab96;
            color: #ffffff;
            // height: 2rem;
        }
    }
    .van-tabs{
        width: 100% ;
        // position: fixed;
        // left: 0;
    }
    .tabFlex{
        width: 100%;
        display: flex;
        padding: 0.5rem;
        margin-top: 10vw;
        div{
            flex: 1;
            text-align: center;
            font-size: 14px;
        }
        .special{
            flex: 0.5;
        }
        .van-icon{
            transform: rotate(90deg);
        }
    }
    section{
        padding: 1rem 1rem 1rem 0.5rem;
        width: 100%;
        background: #c1ab96;
        display: flex;
        flex-wrap: wrap;
        .goodBox{
            width: calc(50% - 1.5rem);
            // height: 260px;
            margin: 0.5rem;
            overflow: hidden;
            background: white;
            border-radius: 5px;
            // margin: 0 0.5rem 0.5rem 0.5rem ;
            img{
                width: 100%;
                height: 40vw;
                // height: 165px;
            }
            .text-box{
                padding: 5px;
            }
            span{
                color: #333333;
                font-weight: normal;
                font-size: 14px;
            }
            p{
                padding: 5px 0 0 0;
                margin: 0;
            }
            .priceText{
                font-size: 1rem;
            }
            .coupon{
                border: 1px solid #8e7e6f;
                font-size: 12px;
            }
            .typeOne{
                border-right: none;
                padding-right: 5px;
            }
            .typeTwo{
                border-left: 1px dashed #8e7e6f;
                padding:0 5px;
            }
        }
        .shopBox{
            background: white;
            padding: 0.5rem;
            border-radius: 5px;
            margin-bottom: 1rem;
            width: calc(100% - 2rem);
            .shopBox-flex{
                display: flex;
                justify-content: space-between;
                .shopBtn{
                    background: #ffffff;
                    padding: 0 0.8rem;
                    border: 1px solid #c1ab96;
                    margin-top: 5px;
                    height: 1.5rem;
                    color: #c1ab96;
                }
                span{
                    color: #eae9e5;
                    font-size: 14px;
                    line-height: 20px;
                }
            }
            .shopBox-imgBox{
                display: flex;
                justify-content: space-between;
                img{
                    width: calc(33.3% - 0.3rem);
                    height: 100px;
                }
            }
        }
        h3{
            color: white;
            width: 100%;
            margin-top: 30px;
            text-align: center;
        }
    }
    .myDialog{
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: flex;
        .myDialog-left{
            opacity: 0.5;
            width: 30%;
            background: #333333;
            height: 100%;
        }
        .dialogCont{
            width: 70%;
            background: white;
            height: 100%;
            opacity: 1;
            padding-top: 1rem;
            h3,p{
                text-indent: 2rem;
                line-height: 40px;
                border-top: 1px solid #f5f6fa;
                border-bottom: 1px solid #f5f6fa;
            }
            p{
                font-size: 14px;
            }
            .slidBox{
                padding: 0.5rem;
            }
            .van-slider{
                margin: 4rem 0;
            }
            .custom-button{
                position: relative;
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                background: #c1ab96;
            }
            .tipsTool{
                position: absolute;
                top: -2.2rem;
                left: -0.6rem;
                background: #ebebec;
                padding: 5px;
                height: 24px;
                overflow: hidden;
                .radiusBox{
                    display: flex;
                    width: 100%;
                    height: 1rem;
                    background: #ebebec;
                    position: relative;
                    div{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        border-radius: 50px;
                        background: white;
                        border-bottom: 0.5rem solid transparent;
                    }
                    div:nth-child(1){
                        left: -50%;
                    }
                    div:nth-child(2){
                        right: -50%;
                    }
                }
            }
        }
    }
</style>